<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { loginService } from '../api/User.js'

// 提示消息状态管理
const message = ref({
  show: false,
  text: '',
  type: 'info' // success/error/info
});

// 显示提示消息（自动消失）
const showMessage = (text, type = 'info', duration = 3000) => {
  message.value = { show: true, text, type };
  setTimeout(() => {
    message.value.show = false;
  }, duration);
};

// 表单数据
const email = ref('');
const password = ref('');
const router = useRouter();

// 处理登录
const handleLogin = async () => {
  // 简单验证
  if (!email.value) {
    showMessage('请输入邮箱', 'error');
    return;
  }
  if (!password.value) {
    showMessage('请输入密码', 'error');
    return;
  }

  try {
    const result = await loginService({ email: email.value, password: password.value });
    if (result.code === 1) {
      showMessage('登录成功，正在进入系统...', 'success', 1000);
      // 存储用户信息
      sessionStorage.setItem('user', result.data.email);
      sessionStorage.setItem('token', result.data.token);
      // 延迟跳转，确保用户看到提示
      setTimeout(() => {
        router.push('/main');
      }, 1000);
    } else {
      showMessage(result.message || '登录失败', 'error');
    }
  } catch (error) {
    showMessage('登录失败,请检查！！！', 'error');
  }
};

const delete1 = () => {
  sessionStorage.removeItem('user');
}
</script>


<template>
  <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- 全局提示组件 -->
    <div v-if="message.show" :class="['fixed top-6 left-1/2 transform -translate-x-1/2 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300',
      message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' :
        message.type === 'error' ? 'bg-red-50 text-red-700 border border-red-200' :
          'bg-blue-50 text-blue-700 border border-blue-200']">
      <p class="flex items-center gap-2">
        <i v-if="message.type === 'success'" class="icon-check-circle"></i>
        <i v-if="message.type === 'error'" class="icon-exclamation-circle"></i>
        <span>{{ message.text }}</span>
      </p>
    </div>

    <!-- 登录卡片 -->
    <div
      class="max-w-md w-full space-y-8 bg-white/95 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
      <div class="relative overflow-hidden">
        <div class="absolute top-0 right-0 -mt-16 -mr-16 w-32 h-32 bg-green-400/20 rounded-full blur-2xl"></div>
        <div class="relative p-8">
          <div class="text-center">
            <h2 class="mt-6 text-3xl font-bold text-gray-900 tracking-tight">
              用户登录
            </h2>
            <div class="w-12 h-1 bg-green-500 rounded-full mx-auto mt-4"></div>
          </div>

          <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
            <div class="rounded-md -space-y-px">
              <div class="mb-4">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
                  邮箱
                </label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 pl-3 flex pointer-events-none">
                    <i class="fa fa-user text-gray-400"></i>
                  </div>
                  <input id="username" name="username" type="text" v-model="email" required
                    class=" w-full h-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-300"
                    placeholder="请输入邮箱">
                </div>
              </div>

              <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                  密码
                </label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fa fa-lock text-gray-400"></i>
                  </div>
                  <input id="password" name="password" type="password" v-model="password" required
                    class=" w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-300"
                    placeholder="请输入密码">
                </div>
              </div>
            </div>

            <div>
              <button type="submit"
                class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                  <i class="fa fa-sign-in text-white/80 group-hover:text-white transition-colors duration-300"></i>
                </span>
                登录
              </button>
            </div>

            <!-- 分居两侧的链接 -->
            <div class="text-sm text-gray-600 flex justify-between items-center mt-4">
              <router-link to="/register" class="font-medium text-green-600 hover:text-green-700 transition-colors">
                <i class="fa fa-user-plus mr-1"></i>立即注册
              </router-link>
              <router-link to="/resetPassword"
                class="font-medium text-green-600 hover:text-green-700 transition-colors">
                重置密码<i class="fa fa-key ml-1"></i>
              </router-link>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
/* 图标样式补充 */
.icon-check-circle {
  color: #10b981;
}

.icon-exclamation-circle {
  color: #ef4444;
}
</style>